Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix tooltip text overflow #41703

Merged
merged 11 commits into from
Aug 13, 2019
Merged

Conversation

markov00
Copy link
Member

Summary

This PR fix the text overflow of tooltips on point series and on pie charts.

The tooltip is build with a table, each column needs to be configured to break long text strings into multiple lines. To achieve this we need to specify a max-width to the container of the cell.
That max-width is the available space on the tooltip minus the column width used for displaying the data value. Whenever possible we want to keep the value column with his maximum extent (to avoid breaking its text into new lines), so we apply the breaking style to the other columns.
Only in one case we apply the breaking on the value column is in the case the value column is larger than half of the max tooltip width.

before:
Screenshot 2019-07-22 at 19 26 47

after:
Screenshot 2019-07-22 at 19 44 19

before:
Screenshot 2019-07-22 at 21 18 12

after:
Screenshot 2019-07-22 at 21 22 05

fix #31846
fix #41039

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

For maintainers

@markov00 markov00 added bug Fixes for quality problems that affect the customer experience Feature:Visualizations Generic visualization features (in case no more specific feature label is available) release_note:fix v8.0.0 v7.4.0 labels Jul 22, 2019
@markov00 markov00 requested a review from a team as a code owner July 22, 2019 19:57
@markov00 markov00 requested review from AlonaNadler and a team July 22, 2019 19:58
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@markov00 markov00 added the Team:Visualizations Visualization editors, elastic-charts and infrastructure label Jul 22, 2019
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app

Copy link
Contributor

@nickofthyme nickofthyme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally, LGTM. Just a few comments.

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@markov00 markov00 requested review from cchaos and removed request for AlonaNadler August 12, 2019 10:00
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like the calculations/ratios aren't quite the same in IE:
Screen Shot 2019-08-12 at 10 45 36 AM

@@ -97,6 +102,42 @@ Tooltip.prototype.show = function () {
left: placement.left,
top: placement.top
});
const tooltipColumns = $tooltip.find('tbody > tr:nth-of-type(1) > td').length;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like a lot of match and element targeting. I'd suggest highly commenting on what is going on so others can follow in case anything needs to be adjusted.

@AlonaNadler
Copy link

@markov00 once ready, any chance we can backport this fix ?

@markov00
Copy link
Member Author

@AlonaNadler we will backport this to 7.4, but I think backporting it to a patch release like 7.3.1 or older is a bit out out the usual scope of patch release in kibana, what do you think?

@timroes timroes added the v7.3.1 label Aug 13, 2019
@markov00
Copy link
Member Author

@cchaos as agreed in our zoom call, I've reverted back the css changes to use directly:

overflow-wrap: break-word;
word-wrap: break-word;

On IE11 can slightly differ of few pixel/chars probably because of some differences in text size computation.

on macOS-Chrome:
Screenshot 2019-08-13 at 18 02 33

on IE11
Screenshot 2019-08-13 at 18 06 35

piechart on macOS-Chrome
Screenshot 2019-08-13 at 18 11 38

piechart on IE11
Screenshot 2019-08-13 at 18 16 59

@markov00 markov00 requested a review from cchaos August 13, 2019 16:41
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@markov00 markov00 merged commit 8ce08ab into elastic:master Aug 13, 2019
@markov00 markov00 deleted the fix_tooltip_overflow branch August 13, 2019 17:34
markov00 added a commit to markov00/kibana that referenced this pull request Aug 13, 2019
markov00 added a commit to markov00/kibana that referenced this pull request Aug 13, 2019
markov00 added a commit that referenced this pull request Aug 13, 2019
markov00 added a commit that referenced this pull request Aug 13, 2019
@CME64
Copy link

CME64 commented Jun 5, 2023

Running Kibana 8.5 and this is still an issue on chrome 114.0.5735.90
Use case:
stacked bar chart on dashboard with field content in annotations. The popup disappears as soon as the mouse leaves the annotation balloon. The scroll function is useless because it's inaccessible.

image

@nickofthyme
Copy link
Contributor

@CME64 Thanks for reporting this bug. Your issue is actually a different component than that mentioned in this issue. Could you please open a new issue so we can track and prioritize it accordingly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience Feature:Visualizations Generic visualization features (in case no more specific feature label is available) release_note:fix Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.3.1 v7.4.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Long field name is truncated in visualization tooltip Pie chart tooltip cut in the middle
7 participants